<template>
  <div class="Fast">
    <form>
      <div class="form_group account_bar">
        <i class="account_icon"> </i>
        <input
          type="text"
          placeholder="请输入手机号"
          maxlength="11"
          v-model="phone"
        />
      </div>
      <div class="form_group code_bar">
        <i class="code_icon"> </i>
        <input type="text" placeholder="请输入验证码" v-model="captcha" maxlength="6"/>
        <button class="codeBtn" @click="seedCode" v-show="!isShowCode">
          获取获证码
        </button>
        <button class="codeBtn bb" v-show="isShowCode">
          剩余{{ count }}s
        </button>
      </div>
    </form>
    <div class="loginBtn" @click="loginBuyCode">登录</div>
  </div>
</template>
<script>
import { mapMutations, mapActions } from "vuex";
import { Toast } from "vant";
import { Dialog } from "vant";
 import {Debounce,Throttle} from "@/utils/tools";
export default {
  name: "FastLogin",
  data() {
    return {
      phone: "",

      timer: null,
      count: 0,
      isShowCode: false,

      // 第一次进来的时候 要获取key
      sendKey: "",
      // 验证码
      captcha: "",
    };
  },
  created() {
    //第一次进来的时候 要获取key 用来获取验证码
    let pro = axios.get("/api/verify_code").then((response) => {
      this.sendKey = response.data.data.key;
    });
  },
  methods: {
    ...mapMutations("login", ["saveToken"]),
    ...mapActions("login", ["getUserInfo"]),
    getCode() {
      

      let url = "";
      let pro = axios
        .post("api/register/verify", {
          code: "",
          key: this.sendKey,
          phone: this.phone,
          type: "login",
        })
        .then((response) => {
          console.log("发送验证码成功", response.data);
          if (response.data.status == 401) {
            Toast({
                message: response.data.msg,
                icon: "close",
              });
            
          } else if (response.data.status == 400) {
          
              
              Toast({
                message: response.data.msg,
                icon: "close",
              });
            
           
          } else {
            Toast.success({
                message: response.data.msg,
                
              });
            this.isShowCode = true
          }
        })
        .catch((err) => {
          console.log("获取验证码失败");
        });
    },
    seedCode() {
        let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (this.phone.length == 0 ) {
        this.$toast.show("手机号或验证码不能为空",800);
        return;
      } else {
        if (!reg.test(this.phone)) {
          this.$toast.show("请输入正确的手机号",800);
          return;
        }
        
      }

      let curCount = 60;
      if (!this.timer) {
       
        this.count = curCount;
        // 获取验证码 208725
        this.getCode();
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= curCount) {
            this.count--;
          } else {
            this.isShowCode = false;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },

    loginBuyCode() {
    let reg = /^1(3[0-9]|5[0-3,5-9]|7[1-3,5-8]|8[0-9])\d{8}$/;
      if (this.phone.length == 0 || this.captcha.length == 0) {
        Toast.fail("手机号或验证码不能为空");
        return;
      } else {
        if (!reg.test(this.phone)) {
          Toast("请输入正确的手机号");
          return;
        }
        
      }
      let url = "/api/login/mobile";
      let pro = axios
        .post(url, {
          captcha: this.captcha,
          phone: this.phone,
          spread: null,
        })
        .then((response) => {
          if (response.data.status == 400) {
            // Toast.fail("登录失败");
          } else {
            let token = response.data.data.token;
            // 记录token值
            this.saveToken(token);
            this.getUserInfo();
            this.$router.push("/user");
          }
          
        })
        .catch((err) => {
          console.log("获取登录数据失败");
        });
    },

    clickLogin:Debounce(function(){
      
      this.loginBuyCode()
    },300)
  },
};
</script>
<style lang="scss" scoped>
.form_group {
  height: 50px;
  
  border-bottom: 1px solid #ededed;
  position: relative;
  > input {
    position: absolute;
    top: 23px;
    left: 33px;
    height: 20px;
    width: 240px;
    // background: pink;
    outline: none;
    border: 0;
    color: #333;
    font-size: 16px;
  }
  > i {
    position: absolute;
    left: 10px;
    bottom: 7px;
    display: block;
  }
  .account_icon {
    width: 18px;
    height: 18px;
    background: url(../../assets/icon/login/phone.svg) no-repeat;
    background-size: 100% 100%;
  }
  .code_icon {
    width: 16px;
    height: 16px;
    background: url(../../assets/icon/login/code.svg) no-repeat;
    background-size: 100% 100%;
  }
  .codeBtn {
    width: 90px;
    height: 23px;
    background: #f35446;
    font-size: 13px;
    color: #fff;
    position: absolute;
    right: 20px;
    bottom: 7px;
    outline: none;
    border: 0;
    border-radius: 11.5px;
  }
  .codeBtn.bb{
    background-color: #bbbbbb;
  } 
}
.wang_psw {
  margin-top: 8px;
  text-align: right;
  font-size: 14px;
  color: #666;
  &::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    background: url(../../assets/icon/login/wen.svg) no-repeat;
    background-size: 100% 100%;
    // margin-right: 5px;
  }
}
.loginBtn {
  height: 43px;
  line-height: 43px;
  font-size: 16px;
  color: #fff;
  font-weight: 700;

  border-radius: 21.5px;
  background: -webkit-gradient(
    linear,
    left top,
    right top,
    from(#f35447),
    to(#ff8e3c)
  );
  background: linear-gradient(90deg, #f35447 0, #ff8e3c);
  background: -moz-linear-gradient(to right, #f35447 0, #ff8e3c 100%);
  text-align: center;

  margin-top: 20px;
}
</style>